import { loadStation } from './station';

function addMarker(
  api: any,
  id: string,
  coordinate: number[],
  imageSize: [number, number],
  image: string,
  position: 'left' | 'right' | 'center' = 'center',
  size = 1,
) {
  api.marker.add({
    id,
    coordinate,
    coordinateType: 1,
    anchors: [
      position === 'left' ? 0 : position === 'right' ? -imageSize[0] * size : (-imageSize[0] * size) / 2,
      imageSize[1] * size,
    ],
    imageSize: [imageSize[0] * size, imageSize[1] * size],
    range: [100, 40000],
    rangeRatio: 0.8,
    viewHeightRange: [100, 40000], // 可见高度范围
    imagePath: '@path:/xyh/' + image,
    fixedSize: true,
    autoHeight: true,
    displayMode: 2,
    occlusionCull: false,
  });
}

// function addMarker3d(api: any, id: string, text: string) {
//   const options = {
//     id,
//     text, //3D标注显示文字
//     textSize: 80, //3D标注显示文字大小
//     textColor: '#ffffff', //3D标注显示文字颜色
//     textFixed: false, // 3D标注显示文字是否固定文本朝向
//     fixedSize: false, // 默认尺寸 非近大远小
//     textVisible: true, //3D标注显示文字是否显示文本
//     textLocation: [0, 0, 40], // 文字位置
//     // textRotation: [0, 0, 0], // 文字旋转
//     // textScale: [1, 1, 1], // 文字缩放
//     pointName: 'Point_Y_3', //3D标注展示的特效名称
//     pointVisible: true, //3D标注是否显示
//     pointScale: 80, //3D标注整体缩放比例
//     // coordinate: [118.975995, 32.17977108], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
//     coordinate: [118.890482087173083, 32.346122395907173, 30], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
//     coordinateType: 1, //坐标系类型
//     range: [1, 30000], //3D标注的可视距离范围：[min,max]，单位：米
//     autoHeight: true, //自动判断下方是否有物体，设置正确高度，默认值：false
//   };
//   api.marker3d.add(options);
// }

function addLine(api: any, id: string, coordinates: number[], color: string, width: number, style: number) {
  const options = {
    id,
    coordinates: coordinates, //构成折线的坐标点数组
    coordinateType: 1, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
    range: [150, 15000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
    viewHeightRange: [850, 115000],
    color,
    thickness: width, //折线宽度
    intensity: style === 5 ? 1 : 50, //亮度
    flowRate: 0.1, //流速
    shape: 0, //折线类型 0：直线， 1：曲线
    depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
    style, //折线样式 参考样式枚举：PolylineStyle
  };
  api.polyline.add(options);
}

function add3dploygon(api: any, id: string, coordinates: number[], color: number[], style: number) {
  const options = {
    id,
    coordinates: coordinates, //构成折线的坐标点数组
    coordinateType: 1, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
    height: 300, //3D多边形的高度
    intensity: 1.0, //亮度
    color,
    style: style, //3DPolygon的样式 请参照API开发文档选取枚举
    tillingX: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图横向平铺
    tillingY: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图纵向平铺

    generateTop: false, //是否生成顶面
    generateSide: true, //是否生成侧面
    generateBottom: false, //是否生成底面
  };
  api.polygon3d.delete(id);
  console.log('%c [ options ]-92', 'font-size:13px; background:pink; color:#bf2c9f;', options);
  api.polygon3d.add(options);
}
function getWidth(data: string) {
  if (data === '1') {
    return 30;
  } else if (data === '2') {
    return 20;
  } else if (data === '3') {
    return 20;
  } else {
    return 20;
  }
}

function getLineColor(id: number) {
  if (id === 1 || id === 4 || id === 6) {
    return '#51fbff';
  } else if (id === 2) {
    return '#34ff93';
  } else if (id === 3 || id === 5) {
    return '#fdf62e';
  } else {
    return '#ffffff';
  }
}

export function addMapData(api: any) {
  api.marker.clear();
  api.marker3d.clear();
  api.markerLayer.clear();
  api.polyline.clear();
  api.hydrodynamic2d.clear();

  loadStation(api, 'all');

  // 示范区标注
  addMarker(api, 'demonstrate', [118.88864, 32.35081], [510, 152], 'texture/scope-1.png', 'left', 0.5);

  // 街道标注
  addMarker(api, 'street1', [118.87682, 32.30329], [180, 58], 'texture/street1.png', 'center');
  addMarker(api, 'street2', [118.95972, 32.31128], [180, 58], 'texture/street2.png', 'center');
  addMarker(api, 'street3', [119.01089, 32.2553], [180, 58], 'texture/street3.png', 'center');

  // 水库
  addMarker(api, 'hezha', [118.986416, 32.267584], [414, 152], 'texture/hezha-1.png', 'left', 0.5);
  addMarker(api, 'shuniu', [118.927359, 32.249908], [462, 152], 'texture/shuniu-1.png', 'left', 0.5);
  addMarker(api, 'shuiku1', [119.007515, 32.387204], [404, 152], 'texture/shuiku1-1.png', 'right', 0.5);
  addMarker(api, 'shuiku2', [119.015018, 32.362097], [462, 152], 'texture/shuiku2-1.png', 'left', 0.5);
  addMarker(api, 'shuiku3', [119.0118761, 32.3432586], [404, 152], 'texture/shuiku3-1.png', 'right', 0.5);
  addMarker(api, 'shuiku4', [119.019546, 32.325987], [414, 152], 'texture/shuiku4-1.png', 'left', 0.5);

  fetch('data/gqqx.geojson')
    .then((res) => res.json())
    .then((response) => {
      response.features.forEach((feature: any, index: number) => {
        const positions = feature.geometry.coordinates[0];
        addLine(
          api,
          'line_gqqx_' + index,
          positions,
          '#16fffe',
          getWidth(feature.properties['级别'] + ''),
          2,
        );
      });
    });
  fetch('data/gan.geojson')
    .then((res) => res.json())
    .then((response) => {
      response.features.forEach((feature: any) => {
        const positions = feature.geometry.coordinates[0];
        addLine(api, 'line_gan', positions, '#16fffe', 50, 2);
      });
    });

  // 街道边线
  fetch('data/street_polygon1.json')
    .then((res) => res.json())
    .then(async (response) => {
      const PS = response.features.map((feature: any, index: number) => {
        console.log('%c [ feature ]-152', 'font-size:13px; background:#40b6f6; color:#84faff;', feature);
        const positions = feature.geometry.coordinates[0];
        return {
          id: 'p3d' + index,
          coordinates: positions,
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          color: getLineColor(1), //颜色值
          height: 300, //3D多边形的高度
          viewHeightRange: [1500, 300000],
          intensity: 1.0, //亮度
          style: 3, //3DPolygon的样式 请参照API开发文档选取枚举
          tillingX: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图横向平铺
          tillingY: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图纵向平铺
          // material: "/JC_CustomAssets/MaterialLibrary/Exhibition/地面_自然/地面_自然_16", //自定义材质路径
          // scalarParameters: [{ "name": "亮度", "value": 1.0 }],  //材质数值类型参数
          // vectorParameters: [{ "name": "颜色", "value": [1, 1, 1] }], //材质数组类型参数
          generateTop: false, //是否生成顶面
          generateSide: true, //是否生成侧面
          generateBottom: false, //是否生成底面
        };
        // addLine(api, 'line_street_' + index, positions, getLineColor(feature.properties.id), 30, 5);
      });

      await fdapi.polygon3d.delete(PS.map((item) => item.id));
      fdapi.polygon3d.add(PS);
      ////使用Polygon3DStyle样式的polygon3d
    });
  // 街道边线2
  fetch('data/street_polygon2.json')
    .then((res) => res.json())
    .then(async (response) => {
      const PS = response.features.map((feature: any, index: number) => {
        console.log('%c [ feature ]-152', 'font-size:13px; background:#40b6f6; color:#84faff;', feature);
        const positions = feature.geometry.coordinates[0];
        return {
          id: 'p3d2_' + index,
          coordinates: positions,
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          color: getLineColor(2), //颜色值
          height: 300, //3D多边形的高度
          viewHeightRange: [1500, 300000],
          intensity: 1.0, //亮度
          style: 3, //3DPolygon的样式 请参照API开发文档选取枚举
          tillingX: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图横向平铺
          tillingY: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图纵向平铺
          // material: "/JC_CustomAssets/MaterialLibrary/Exhibition/地面_自然/地面_自然_16", //自定义材质路径
          // scalarParameters: [{ "name": "亮度", "value": 1.0 }],  //材质数值类型参数
          // vectorParameters: [{ "name": "颜色", "value": [1, 1, 1] }], //材质数组类型参数
          generateTop: false, //是否生成顶面
          generateSide: true, //是否生成侧面
          generateBottom: false, //是否生成底面
        };
        // addLine(api, 'line_street_' + index, positions, getLineColor(feature.properties.id), 30, 5);
      });

      await fdapi.polygon3d.delete(PS.map((item) => item.id));
      fdapi.polygon3d.add(PS);
      ////使用Polygon3DStyle样式的polygon3d
    });
  // 街道边线3
  fetch('data/street_polygon3.json')
    .then((res) => res.json())
    .then(async (response) => {
      const PS = response.features.map((feature: any, index: number) => {
        console.log('%c [ feature ]-152', 'font-size:13px; background:#40b6f6; color:#84faff;', feature);
        const positions = feature.geometry.coordinates[0];
        return {
          id: 'p3d3_' + index,
          coordinates: positions,
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          color: getLineColor(3), //颜色值
          height: 300, //3D多边形的高度
          viewHeightRange: [1500, 300000],
          intensity: 1.0, //亮度
          style: 3, //3DPolygon的样式 请参照API开发文档选取枚举
          tillingX: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图横向平铺
          tillingY: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图纵向平铺
          // material: "/JC_CustomAssets/MaterialLibrary/Exhibition/地面_自然/地面_自然_16", //自定义材质路径
          // scalarParameters: [{ "name": "亮度", "value": 1.0 }],  //材质数值类型参数
          // vectorParameters: [{ "name": "颜色", "value": [1, 1, 1] }], //材质数组类型参数
          generateTop: false, //是否生成顶面
          generateSide: true, //是否生成侧面
          generateBottom: false, //是否生成底面
        };
        // addLine(api, 'line_street_' + index, positions, getLineColor(feature.properties.id), 30, 5);
      });

      await fdapi.polygon3d.delete(PS.map((item) => item.id));
      fdapi.polygon3d.add(PS);
      ////使用Polygon3DStyle样式的polygon3d
    });

  // 街道边线
  // fetch('data/5.json')
  //   .then((res) => res.json())
  //   .then((response) => {
  //     response.features.forEach((feature: any, index: number) => {
  //       console.log('%c [ feature ]-152', 'font-size:13px; background:#40b6f6; color:#84faff;', feature);
  //       const positions = feature.geometry.coordinates[0];
  //       addLine(api, 'line_street_' + index, positions, getLineColor(feature.properties.id), 30, 5);
  //     });
  //   });

  // 示范区高亮线
  fetch('data/4.json')
    .then((res) => res.json())
    .then((response) => {
      const positions = response.features[0].geometry.coordinates[0];
      addLine(api, 'line_highlight', positions, '#fff', 30, 5);
    });

  // 长江
  // NOTE: 因为长江不在影像地形范围内，无法显示
  // addMarker3d(api, 'changjing', '长江');

  // 街道边线
  fetch('data/5.json')
    .then((res) => res.json())
    .then((response) => {
      response.features.forEach((feature: any, index: number) => {
        const positions = feature.geometry.coordinates[0];
        addLine(api, 'line_street_' + index, positions, getLineColor(feature.properties.id), 30, 5);
      });
    });
}

export function addGeojsonLayer(api) {
  //添加前先清除保证id唯一
  api.geoJSONLayer.clear();

  //简单渲染器
  let simpleRenderer = {
    //使用自定义材质
    //material: "/JC_CustomAssets/polygon/Exhibition/MI_Polygon", //自定义材质路径 设置后style相关参数会失效
    //scalarParameters: [{ "name": "亮度", "value": 2},{ "name": "类型", "value": 2}],  //材质数值类型参数
    //vectorParameters: [{ "name": "Color", "value": [1,1,1,1] }], //材质数组类型参数

    //渲染器类型
    rendererType: 0,
    //默认符号化配置
    defaultSymbol: {
      //符号化类型枚举：0 simple-marker圆形点填充  1 simple-line线填充  2 simple-fill面填充 3 polygon3d填充
      symbolType: 3,
      //默认高度
      height: 1,
      //默认填充颜色
      color: [1, 1, 0, 0.6],
      //默认轮廓线
      outline: {
        //线宽
        width: 1,
        //颜色
        color: [1, 1, 1, 1],
      },
    },
    //根据字段高度拉高polygon，支持控制颜色、尺寸和透明度的插值显示
    visualVariables: [
      {
        //控制显示的类型：颜色尺寸高度不透明度
        type: 1,
        //属性字段名称
        field: '',
        //属性字段类型
        fieldType: 1,
      },
    ],
  };

  //用简单渲染器添加GeoJSONLayer
  api.geoJSONLayer.add({
    id: 'layer3',
    visible: true, //加载后是否显示
    rotation: [0, 0, 0], //图层旋转
    offset: [0, 0, 0], //基于原始位置的偏移量
    needProject: true, //开启投影转换
    textMarkerField: '',
    textRange: [0, 280], //文字标注可见范围
    onTerrain: true, //是否贴地
    collision: true, //开启碰撞
    url: '@path:xyh/data/dahu.geojson',
    renderer: simpleRenderer,
  });
  api.camera.set(393929.343438, 3584137.90875, 2193.216719, -37.166187, 46.831429, 2);

  // api.geoJSONLayer.focus('layer3', 10);
  fetch('data/qcsfp.json')
    .then((res) => res.json())
    .then((response) => {
      console.log('%c [ response ]-175', 'font-size:13px; background:pink; color:#bf2c9f;', response);
      add3dploygon(api, 'p3d', response.features[0].geometry.coordinates[0][0], [0, 0.5, 1, 1], 4);
    });
}
